<template>
  <div>
    <div class="modal-header bg-white">
      <h4 id="myLargeModalLabel" class="modal-title">&nbsp;&nbsp; 添加权益</h4>
    </div>
    <el-form ref="form" :model="pageModel" :rules="rules" class="clearfix modal-body">
      <el-form-item style="flex-shrink: 0;" label="" prop="equityName">
        <el-input
          v-model="pageModel.equityName"
          :maxlength="200"
          placeholder="权益名称"
          class="filter-item fl"/>
      </el-form-item>
      <el-form-item style="flex-shrink: 0;" label="" prop="equityType">
        <el-select v-model="pageModel.equityType" placeholder="权益类型">
          <el-option v-for="item in gradeOptions" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item style="flex-shrink: 0;" label="" prop="remark">
        <el-input
          v-model="pageModel.remark"
          :maxlength="200"
          placeholder="权益备注"
          class="filter-item fl"/>
      </el-form-item>
      <el-form-item style="flex-shrink: 0;" label="" prop="equityStatus">
        <el-select v-model="pageModel.equityStatus" placeholder="状态">
          <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
      <div class="attribute-operation clearfix fr">
        <el-button
          type="primary"
          @click="nextStep">
          下一步
        </el-button>
        <el-button
          @click="close">
          关闭
        </el-button>
      </div>
    </el-form>
  </div>
</template>

<script>

  export default {
    name: 'AddEquity',
    props: {
      data: {required: true, type: Object}
    },
    data() {
      return {
        showMe: false,
        gradeOptions: [
          {
            label: '保单权益',
            value: 1
          },
          {
            label: '客户权益',
            value: 2
          }
        ],
        typeOptions: [ // 状态
          {
            label: '正常',
            value: 0
          },
          {
            label: '停止服务',
            value: 1
          }
        ],
        rules: {
          equityName: [
            {required: true, message: '请输入权益名称', trigger: 'blur'}
          ],
          equityType: [
            {required: true, message: '请选择权益类型', trigger: 'blur'}
          ]
        },
        pageModel: {
          equityName: null, // 权益名称
          equityType: null, // 权益类型 1:保单权益 2:客户权益
          equityStatus: null, // 权益状态
          remark: null, // 备注
        }
      }
    },
    // watch: {
    //   step(value) {
    //     this.showMe = (value === 1);
    //     this.$emit('close');
    //   }
    // },
    created() {
      if (this.data.equityName) {
        this.pageModel = {
          equityName: this.data.equityName, // 权益名称
          equityType: this.data.equityType, // 权益类型 1:保单权益 2:客户权益
          equityStatus: this.data.equityStatus, // 权益状态
          remark: this.data.remark, // 备注
        }
      }
    },
    methods: {
      close() {
        this.$emit('close');
      },
      nextStep() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.$emit('next', this.pageModel);
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>
